Ext.define('MyApp.view.groupManager', {
	extend : 'Ext.panel.Panel',
	id : 'groupManager',
	closable : true,
	title : '微信群管理信息',
	queryForm : null,
	getQueryForm : function() {
		var me = this;
		if (me.queryForm == null) {
			me.queryForm = Ext.widget('form', {
				layout : 'column',
				defaults : {
					margin : '10 10 10 10',
					columnWidth : .2,
					labelWidth : 80,
					xtype : 'textfield'
				},
				items : [DataDictionary.getDataDictionaryCombo('groupType', {
							fieldLabel : '群分类',
							name : 'groupType',
							labelWidth : 85,
							editable : false
						}, {
							value : null,
							display : '全部'
						}), {
					name : 'groupNameLike',
					fieldLabel : '群名称'
				}, {
					xtype : 'container',
					columnWidth : .4,
					defaults : {
						margin : '0 10 0 10'
					},
					items : [{
						xtype : 'button',
						width : 80,
						text : '查询',
						handler : function() {
							me.getPagingToolbar().moveFirst();
						}
					}, {
						xtype : 'button',
						width : 80,
						text : '重置',
						handler : function() {
							me.getQueryForm().getForm().reset();
						}
					}]
				}]
			});
		}
		return this.queryForm;
	},
	pagingToolbar : null,
	getPagingToolbar : function() {
		var me = this;
		if (me.pagingToolbar == null) {
			me.pagingToolbar = Ext.widget('pagingtoolbar', {
				store : me.getStore(),
				dock : 'bottom',
				displayInfo : true
			});
		}
		return me.pagingToolbar;
	},
	store : null,
	getStore : function() {
		var me = this;
		if (me.store == null) {
			me.store = Ext.create('MyApp.store.GroupInfoStore', {
				autoLoad : true,
				listeners : {
					beforeload : function(store, operation, eOpts) {
						var queryForm = me.getQueryForm();
						if (queryForm != null) {
							var values = queryForm.getValues();
							Ext.apply(operation, {
								params : {
									'groupType' : Ext.String.trim(values.groupType),
									'groupNameLike' : Ext.String.trim(values.groupNameLike)
								}
							});
						}
					}
				}
			});
		}
		return me.store;
	},
	updateGroupWindow : null,
	getUpdateGroupWindow : function() {
		var me = this;
		if (me.updateGroupWindow == null) {
			me.updateGroupWindow = Ext.create('MyApp.view.groupEditWindow');
		}
		return me.updateGroupWindow;
	},
	groupInfoGrid : null,
	getGroupInfoGrid : function() {
		var me = this;
		if (Ext.isEmpty(me.groupInfoGrid)) {
			me.groupInfoGrid = Ext.widget('gridpanel', {
				header : false,
				columnLines : true,
				store : me.getStore(),
				columns : [{
							xtype : 'rownumberer'
						}, {
							xtype : 'actioncolumn',
							flex : 1,
							text : "操作",
							align : 'center',
							items : [{
								icon : './images/chat/handle_48.png',
								tooltip : "修改",
								handler : function(grid, rowIndex, colIndex,
										item, e, record, row) {
									var groupWindow = me.getUpdateGroupWindow();
									groupWindow.show();
									groupWindow.bindData(record);

								}
							}, '-', {
								icon : './images/common/delete.png',
								tooltip : "删除",
								handler : function(grid, rowIndex, colIndex,
										item, e, record, row) {
									Ext.Msg.confirm('删除', '确定删除吗？', function(btn){
										if(btn == 'yes'){
											// Submit the Ajax request and handle the response
											Ext.Ajax.request({
												url : './rs/group/deleteGroup',	
												jsonData:{
													'groupInfo':{
														'id' : record.get('id')
													}
												},
												success : function(response, opts) {
													var json = Ext.decode(response.responseText); 
													Ext.ux.Toast.msg('温馨提示',json.responseStatus.message);
										        	var groupManager = Ext.getCmp('groupManager'),
													groupGrid = groupManager.getGroupInfoGrid();
													groupGrid.getStore().load();
										        	
												},
												failure : function(response, opts) {
													var json = Ext.decode(response.responseText); 
													Ext.ux.Toast.msg('温馨提示',json.responseStatus.message);
												}
											});
										}
										
									}); 
								}
							}]
						}, {
							dataIndex : 'groupType',
							flex : 1,
							align : 'center',
							text : '群类别',
							renderer : function(value) {
								return DataDictionary.rendererSubmitToDisplay(
										value, 'groupType');
							},
							editor : DataDictionary.getDataDictionaryCombo(
									'groupType', {
										name : 'groupType',
										editable : false
									})
						}, {
							dataIndex : 'groupName',
							flex : 2,
							align : 'center',
							text : '群名'
						}, {
							dataIndex : 'avatarUrl',
							text : '群头像地址',
							flex : 2.5,
							align : 'center',
							xtype: 'tipcolumn', 
							tipConfig: {
								trackMouse: true,
							    hideDelay: 500 
							},
							tipBodyElement:'MyApp.view.userAvatarImage'
						}, {
							dataIndex : 'managerQrCodeUrl',
							flex : 2.5,
							align : 'center',
							text : '群主二维码地址',
							xtype: 'tipcolumn', 
							tipConfig: {
								trackMouse: true,
							    hideDelay: 500 
							},
							tipBodyElement:'MyApp.view.userAvatarImage'
						}, {
							dataIndex : 'qrCodeUrl',
							flex : 2.5,
							align : 'center',
							text : '群二维码地址',
							xtype: 'tipcolumn', 
							tipConfig: {
								trackMouse: true,
							    hideDelay: 500 
							},
							tipBodyElement:'MyApp.view.userAvatarImage'
						}, {
							dataIndex : 'details',
							flex :2.5,
							align : 'center',
							text : '群描述'
						}, {
							xtype : 'datecolumn',
							format : 'Y-m-d H:i:s',
							dataIndex : 'createTime',
							text : '创建时间',
							align : 'center',
							flex : 1
						}, {
							xtype : 'datecolumn',
							format : 'Y-m-d H:i:s',
							dataIndex : 'lastUpdateTime',
							text : '更新时间',
							align : 'center',
							flex : 1
						}, {
							dataIndex : 'isDeleted',
							text : '是否启用',
							flex : 0.5,
							align : 'center',
							renderer : function(value, metaData, record,
									rowIndex, colIndex, store, view) {
								return CommonFunction.rendererEnable(value);
							}
						}],
				plugins : [Ext.create('Ext.grid.plugin.CellEditing', {
					clicksToEdit : 1,
					listeners : {
						'edit' : function(editor, e) {
							var record = e.record;
							if (record.modified.groupType == undefined
									|| record.modified.groupType == record
											.get('groupType')) {
								return;
							}
							var url = './rs/group/updateGroup';
							Ext.Ajax.request({
										url : url,
										jsonData : {
											'groupInfo' : {
												'id' : record.get('id'),
												'groupType' : record
														.get('groupType')
											}
										},
										success : function(response, opts) {
											Ext.ux.Toast.msg("温馨提示", "分配成功！");
											me.getGroupInfoGrid().getStore()
													.load();
										},
										exception : function(response, opts) {
											var json = Ext
													.decode(response.responseText);
											Ext.ux.Toast
													.msg(
															"温馨提示",
															json.responseStatus.message);
										}
									});
						}
					}
				})],

				dockedItems : [me.getPagingToolbar()]
			});
		}
		return me.groupInfoGrid;
	},
	initComponent : function() {
		var me = this;
		Ext.applyIf(me, {
					items : [me.getQueryForm(), me.getGroupInfoGrid()]
				});
		me.callParent(arguments);
	}

});

Ext.define('MyApp.view.groupEditWindow', {
	extend : 'Ext.window.Window',
	title : '修改群信息',
	width : 600,
	closeAction : 'hide',
	modal : true,
	editContainer : null,
	getEditContainer : function(){
		var me = this;
		if(me.editContainer == null){
			me.editContainer = Ext.create('MyApp.view.EditContainer');
		}
		
		return me.editContainer;
	},
	bindData : function(record) {
		var me = this;
		me.getEditContainer().bindData(record);
	},
	updateGroupForm : function(){
		var me = this;
		var submitForm = Ext.getCmp('editGroupForm');
		var form = submitForm.getForm();
		if(!form.isValid()){
			return false;
		}
		
		var record = form.getRecord();
		form.updateRecord(record);
		
		Ext.Ajax.request({
		    url: submitForm.url,
		    jsonData:{
				'groupInfo':record.data
			},
		    success: function(response, opts) {
		        var result = Ext.decode(response.responseText);
		        Ext.ux.Toast.msg('温馨提示',result.responseStatus.message);
	        	var groupManager = Ext.getCmp('groupManager'),
				groupGrid = groupManager.getGroupInfoGrid();
				groupGrid.getStore().load();
	        	me.close();
		    },
		    failure: function(response, opts) {
		    	var result = Ext.decode(response.responseText);
		        Ext.ux.Toast.msg('温馨提示',json.responseStatus.message);
		    }
		});
		
		
	},
	initComponent : function() {
		var me = this;
		Ext.applyIf(me, {
			items : [me.getEditContainer()],
			// 重置 和 保存 按钮.
			buttons : [{
				text : '保存',
				handler : function() {
					me.updateGroupForm();
				}
			},'-',{
				text : '取消',
				handler : function() {
					me.close();
				}
			}]
		});
		me.callParent(arguments);
	}
});

/**property-form不能再包含file-form,改造为容器包含两个form**/
Ext.define('MyApp.view.EditContainer',{
	extend : 'Ext.container.Container',
	layout : {
		type : 'vbox',
		align : 'bottom'//底部对齐
	},
	width : '100%',
	margin : '0 0 30 0',
	editGroupForm : null,
	getEditGroupForm : function(){
		var me = this;
		if(me.editGroupForm == null){
			me.editGroupForm = Ext.create('MyApp.view.EditGroupForm');
		}
		return me.editGroupForm;
	},
	
	//file-01-form
	file_01_form : null,
	getFile01_form : function(){
		var me = this;
		if(me.file_01_form == null){
			me.file_01_form = Ext.create('MyApp.view.fileUpload',{
				name:'imageFile',
				fieldLabel:'群头像',
				type: 'avatarUrl',
				action:'./rs/upload/avatarImage'
			});
		}
		return me.file_01_form;
	},
	
	//file-02-form
	file_02_form : null,
	getFile02_form : function(){
		var me = this;
		if(me.file_02_form == null){
			me.file_02_form = Ext.create('MyApp.view.fileUpload',{
				name:'imageFile',
				fieldLabel:'群主二维码',
				type:'managerQrCodeUrl',
				action:'./rs/upload/qrCodeImage'
			});
		}
		return me.file_02_form;
	},
	
	//file-03-form
	file_03_form : null,
	getFile03_form : function(){
		var me = this;
		if(me.file_03_form == null){
			me.file_03_form = Ext.create('MyApp.view.fileUpload',{
				name:'imageFile',
				fieldLabel:'群二维码',
				type:'qrCodeUrl',
				action:'./rs/upload/qrCodeImage'
			});
		}
		return me.file_03_form;
	},
	bindData : function(record){
		var me = this;
		me.getEditGroupForm().bindData(record);
		me.getFile01_form().bindData(record.get('avatarUrl'));
		me.getFile02_form().bindData(record.get('managerQrCodeUrl'));
		me.getFile03_form().bindData(record.get('qrCodeUrl'));
	},
	constructor : function(config) {
		var me = this, cfg = Ext.apply({}, config);
		me.items = [me.getEditGroupForm(),me.getFile01_form(),me.getFile02_form(),me.getFile03_form()];
		me.callParent([cfg]);
	}
});		
		
Ext.define('MyApp.view.EditGroupForm', {
	id: 'editGroupForm',
	extend : 'Ext.form.Panel',
	url: './rs/group/updateGroup',
	border : 0,
	defaults : {
		margin : 10
	},
	bindData:function(record){
		var me = this, form = me.getForm();
		form.loadRecord(record);
	},
	initComponent : function() {
		var me = this;
		me.items = [
			{
				xtype : 'container',
				layout : 'hbox',//水平盒子布局
				items : [
					 Ext.widget('hiddenfield', {
						id: 'avatarUrl',
						name: 'avatarUrl',
						value: null
					 }),
					 Ext.widget('hiddenfield', {
						id: 'managerQrCodeUrl',
						name: 'managerQrCodeUrl',
						value: null
					 }),
					 Ext.widget('hiddenfield', {
						id: 'qrCodeUrl',
						name: 'qrCodeUrl',
						value: null
					 }),
					 Ext.widget('hiddenfield', {
						id: 'qrcodeText',
						name: 'qrcodeText',
						value: null
					 }),
					{
						xtype : 'textfield',
						fieldLabel : "群名",
						name : 'groupName',
						allowBlank : false,
						labelWidth : 50,
						labelAlign :'left',
						columnWidth : .5
					},
					setPadding(30),
					DataDictionary.getDataDictionaryCombo('groupType', {
						fieldLabel : '群类型',
						labelWidth : 50,
						name : 'groupType',
						editable : false,
						allowBlank : false,
						labelAlign :'left',
						columnWidth : .5
					})
				]
			},
			{
				xtype : 'container',
				layout : 'hbox',//水平盒子布局
				items : [
					{
						xtype : 'textfield',
						fieldLabel : "群描述",
						name : 'details',
						allowBlank : false,
						labelWidth : 50,
						labelAlign :'left',
						height : 100,
						width: 500,
						flex : 1
					}
				]
		}
			];
		me.callParent();
	}

});

		
/**上传图片群头像**/
Ext.define('MyApp.view.fileUpload',{
	extend: 'Ext.form.Panel',
    width: 600,
    height: 70,
    border: 0,
    layout: {
    	type: 'hbox',
    	align: 'bottom'
    },
    imageInfo: null,
	getImageInfo: function(){
		var me = this;
		if(me.imageInfo==null){
			me.imageInfo = Ext.create('MyApp.view.userAvatarImage');
		}
		return me.imageInfo;
	},
	bindData: function(url){
		var me = this;
		me.getImageInfo().bindData(url);
	},
    initComponent: function(config){
    	var me = this;
    	
    	me.items = [
    		setPadding(10),
    		{
    		 	xtype: 'filefield',
	         	labelWidth : 80,
	        	msgTarget : 'side',
	        	allowBlank : false,
	        	buttonText : '选择图片',
	        	flex : 3,
	        	name : me.name,
	        	type : me.type,
	        	fieldLabel : me.fieldLabel
    		},
		    setPadding(50),
		    {
		    	xtype: 'button',
		        text: '上传'+me.fieldLabel,
		        flex: 1,
		        handler: function() {
		            var form = this.up('form').getForm();
		            if(form.isValid()){
		                form.submit({
		                    url: me.action,//可配置
		                    waitMsg: '上传图片中...',
		                    success: function(fp, o) {
		                    	me.bindData(o.result.fileUrl);
		                    	
		                    	//上传群二维码
		                    	if(me.type == 'qrCodeUrl'){
			                    	var qrCodeInput = Ext.getCmp('qrcodeText');
			                    	qrCodeInput.value = o.result.qrcodeText;
		                    	}
		                    	
		                    	Ext.getCmp(me.type).value = o.result.fileUrl;
		                    	
		                        Ext.Msg.alert('Success', '图片上传成功');
		                    }
		                });
		            }
		        }
		    },
		    setPadding(50),
		    me.getImageInfo(),
			setPadding(20)
    	];
		me.callParent();
    }
    
});

Ext.define('MyApp.view.userAvatarImage', {
	extend : 'Ext.Img',
	src : null,
	height : 64,
	width : 64,
	border : 1,
	bindData : function(imageUrl, value, metadata, store, view) {
		var me = this;
		if (Ext.isEmpty(imageUrl)) {
			return false;
		} else {
			if(!Ext.isString(imageUrl)){
				imageUrl = value;
			}
			me.setSrc(SystemUtil.getImageUrl(imageUrl,'_64x64'));
			return true;
		}
	},
	constructor : function(config) {
		var me = this, cfg = Ext.apply({}, config);
		me.callParent([cfg]);
	}
});

/***
 * 元素之间设置间距
 * @param {} width
 * @return {}
 */
var setPadding = function(width){
	var item = {
    	html : '',
    	width : width,
    	height:0
    };
    return item;
}

